<template>
  <div class="theme" ref="themeRef">
    <!-- 标题区域 -->
    <van-sticky ref="stickyRef">
      <header-component :title="data.title" :showAdd="false" :titleSlide="titleSlide"></header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <section>
      <!-- 自动跟随系统 -->
      <p>主界面外观</p>
      <tagList class="tag-list" :titleBottom="'14px'" :showRightSlot="true" :showRightArrow="false" :content="data.deleteSecondaryConfirmation">
        <template #rightSlot>
          <van-switch v-model="checked" />
        </template>
      </tagList>
      <!-- 自动跟随系统 -->
      <p>深色外观下的阅读器背景色</p>
      <van-radio-group v-model="radio">
        <tagList class="tag-list" :titleBottom="'10px'" :showRightSlot="true" :showRightArrow="false" :content="data.color">
          <template #rightSlot>
            <van-radio name="1"></van-radio>
          </template>
        </tagList>
        <tagList class="tag-list" :titleBottom="'10px'" :showRightSlot="true" :showRightArrow="false" :content="data.color1">
          <template #rightSlot>
            <van-radio name="2"></van-radio>
          </template>
        </tagList>
      </van-radio-group>

    </section>
  </div>
</template>

<script setup name="personalityPreference">
import headerComponent from "@/components/header/index.vue";
import tagList from '@/components/list/tagList.vue';
import { ref, watch, reactive } from "vue";
import useScroll from "@/hooks/useScroll";
import {Dialog} from "vant"
import {useScrollWatch,useScrollWatch2} from "@/hooks/userScrollWatch.js";
// data
const data = new reactive({
  // title
  title: '外观主题',
  isShowDialog: true,
  // contentList
  deleteSecondaryConfirmation: [{url: '', icon: 'fa-solid fa-lock', iconColor: '#f64f59', name: '自动跟随系统', type: '', typeName: '', value: '', label: '', info: ''}],
  color: [{url: '', icon: 'fa-solid fa-lock', iconColor: '#f64f59', name: '纯黑', type: '', typeName: '', value: '', label: '', info: ''}],
  color1: [{url: '', icon: 'fa-solid fa-lock', iconColor: '#f64f59', name: '深灰', type: '', typeName: '', value: '', label: '', info: ''}],
})
// 菜单
// 是否显示
const isShowOverlay = ref(false);
// 关闭弹窗
const handleClose = (value) => {
  console.log(value)
  isShowOverlay.value = false
}

const checked = ref(false);
const radio = ref();
// 标题动画相关的操作

const themeRef = ref();
const stickyRef = ref();
let titleSlide = useScrollWatch(themeRef)
useScrollWatch2(titleSlide,stickyRef)
</script>

<style lang="less" scoped>
.theme {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;
  section{
    padding: 0 12px;
    p{
      padding: 0 10px;
      position: relative;
      top: 38px;
      font-size: 12px;
      color: var(--primary-font-color);
    }
  }
}
.theme::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
.tag-list{
  position: relative;
  top: 40px;
  .van-radio{
    justify-content: flex-end;
  }
}
</style>
